<template>
	<div class="main">
		<div class="title">专业剖析
		<el-link @click="handle" class="addLink">（了解更多可点击）</el-link>
			<div class="line"></div>
		</div>
		<el-table class="table" :data="bigjobtypelist" :row-key="getRowKeys" :expand-row-keys="expands" @expand-change="expandSelect" @row-click="clickRowHandle">
			<!-- 根据后台数据进行选择渲染专业大类 -->
			<el-table-column type='expand'>
				<template v-slot:default='scope'>
					<!-- 专业大类渲染 -->
					<el-row v-for="(item1,i1) in scope.row.detailjob" :key="i1"
						:class="['bdbottom',i1===0?'bdtop':'','vcenter','elcenter']">
						<el-col :span="5">
							<el-tag class="tag1" size="medium">{{item1.majorCategories}}
								<i class="el-icon-caret-right"></i>
							</el-tag>

						</el-col>
						<el-col :span="19">
							<!-- 具体专业的渲染 -->
							<el-row v-for="(item2,i2) in scope.row.detailjob[i1].majorName" :key="i2">
								<el-tooltip class="item" effect="dark" content="点击查看岗位具体内容" placement="top-start">
									<el-tag v-if="scope.row.detailjob[i1]!=''" type="success" class="tag" size="medium"
										@click="getdetailmessage(item2)">{{item2}}</el-tag>
								</el-tooltip>


							</el-row>
						</el-col>
					</el-row>
				</template>
			</el-table-column>
			<!-- 学科的渲染 -->
			<el-table-column prop="subject" width="630px">
			</el-table-column>
		</el-table>
		<!-- 具体专业介绍的模态框 -->
		<el-dialog  :visible.sync="jobdialogVisible" width="50%" append-to-body>
			<template slot="title">
						<div style="font-size: 35px;
			font-family: Noto Sans SC;color:#38b48b;font-weight: bold;">{{title}}</div>
					</template>
			<p>{{Maindisciplines[0]}}</p>
			<span>{{Maindisciplines[1]}}</span>
			<p>{{Maincourses[0]}}</p>
			<span>{{Maincourses[1]}}</span>
			<p>{{lengthofschooling[0]}}</p>
			<span>{{lengthofschooling[1]}}</span>
			<p>{{Trainingobjectives[0]}}</p>
			<span>{{Trainingobjectives[1]}}</span>
			<p>{{requirements[0]}}</p>
			<span>{{requirements[1]}}</span>
			<p>{{Practicalteaching[0]}}</p>
			<span>{{Practicalteaching[1]}}</span>
			<p>{{degree[0]}}</p>
			<span>{{degree[1]}}</span>
			<p>{{abilities[0]}}</p>
			<span>{{abilities[1]}}</span>

			<span slot="footer" class="dialog-footer">
				<el-button @click="jobdialogVisible = false">返回</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	export default ({
		data() {
			return {
				// 职业大类
				bigjobtypelist: [],
				stationlist: [],
				jobdialogVisible: false,
				detailjob: [],
				title: '',
				// 主要学科
				Maindisciplines: "",
				// 主要课程
				Maincourses: "",
				// 修业年限
				lengthofschooling: "",
				// 培养目标
				Trainingobjectives: "",
				// 培养要求
				requirements: "",
				// 实践教学
				Practicalteaching: "",
				// 授予学位
				degree: "",
				// 毕业生应获得以下几方面的知识和能力
				abilities: "",
				expands: [],
				getRowKeys(row) {
					return row.number
				},



			}
		},
		created() {
			this.getbigjoblist()
		},
		methods: {
			handle() {
			       window.open("https://www.dxsbb.com/news/list_240.html", '_blank')
			   },
			// 加载学科大类和专业大类
			async getbigjoblist() {
				const {
					data: res
				} = await this.$axios.get(
					`${this.baseURL}/SubjectProfessionalClassification/showAllSubject`)
				if (res.status !== 200) {
					this.$message.error('获取失败')
				}
				this.bigjobtypelist = res.data
				// console.log(this.bigjobtypelist)
				// let that = this
				// // 利用for循环组装数据，方便展示
				// that.bigjobtypelist.forEach(function(item1, index1) {
				// 	that.bigjobtypelist[index1]['detailjob'] = new Array(0);
				// 	item1.subjects.forEach(function(item2, index2) {
				// 		that.getdetailjob(item2, index1)
				// 		// that.bigjobtypelist[index1]['detailjob'] = data
				// 	})
				// })
				// console.log(this.bigjobtypelist)
			},
			// 通过专业来获取专业介绍
			async getdetailmessage(mes) {
				this.title = mes + "的专业详细描述"
				const {
					data: res
				} = await this.$axios.post(
					`${this.baseURL}/SubjectProfessionalClassification/showSpecialtyInstructionByMajorName?majorName=${mes}`
				)
				if (res.status !== 200) {
					this.$message.error('获取失败')
				}
				this.Maindisciplines = res.data[0].split(":")
				this.Maincourses = res.data[1].split(":")
				this.lengthofschooling = res.data[2].split(":")
				this.Trainingobjectives = res.data[3].split(":")
				this.requirements = res.data[4].split(":")
				this.Practicalteaching = res.data[5].split(":")
				this.degree = res.data[6].split(":")
				this.abilities = res.data[7].split(":")
				this.jobdialogVisible = true
			},
			async expandSelect(row, expandedRows) {
				console.log('expandedRows', expandedRows)
				console.log('row', row)
				var that = this
				if (expandedRows.length) {
					that.expands = []
					if (row) {
						const {data:res} = await this.$axios.post(`${this.baseURL}/SubjectProfessionalClassification/selectMajorCategoriesAndMajorNameBySubject?subject=${row.subject}`)
						if(res.status!=200){
							this.$message.error("获取数据失败")
						}
						that.bigjobtypelist[row.number-1]['detailjob'] = new Array(0);
						that.bigjobtypelist[row.number-1]['detailjob'] = res.data;
						that.expands.push(row.number) // 每次push进去的是每行的ID
					}
				} else {
					that.expands = [] // 默认不展开
				}
				// console.log('that.expands', that.expands)
			},
			// 点击行元素进行小类懒加载
			async clickRowHandle(row) {
				if (this.expands.includes(row.number)) {
					this.expands = []
				} else {
					this.expands = []
					if (row) {
			
						// 通过大类名字查询小类，但是再页面有点卡顿，需优化，本次交底时间急，来不及优化。
						const {data:res} = await this.$axios.post(`${this.baseURL}/SubjectProfessionalClassification/selectMajorCategoriesAndMajorNameBySubject?subject=${row.subject}`)
						if(res.status!=200){
							this.$message.error("获取数据失败")
						}
						if (res.status != 200) {
							this.$message.error('获取失败')
						}
						this.bigjobtypelist[row.number - 1]['detailjob'] = new Array(0);
						this.bigjobtypelist[row.number - 1]['detailjob'] = res.data;
						console.log(this.bigjobtypelist)
			
			
						this.expands.push(row.number) // 每次push进去的是每行的ID
			
					}
					// this.expands.push(row.number);
				}
			}
			


		}

	})
</script>
<style scoped>
	.main {
		width: 100%;

	}
	
	.title {
		text-align: left;
		width: 100%;
		height: 62px;
		font-size: 24px;
		font-family: Noto Sans SC;
		font-weight: 700;
		text-align: left;
		color: #333333;
		margin-top: 15px;
		margin-left: 20px;
		position: relative;
	}
	p{
		font-size: 30px;
		font-family: Noto Sans SC;
		color: #000000;
	}
	span{
		font-size: 23px;
		font-family: Noto Sans SC;
	}
	el-dialog__title{
		font-size: 20px!important;
	}
	.line {
		position: absolute;
		bottom: 0px;
		width: 1025px;
		height: 2px;
		background-color: rgba(51, 170, 255, .4);
	}

	/* .news_items{
    width: 960px;
    margin: 0 auto;
    margin-bottom: 30px;
}
.imagination{
    width: 969px;
    height: 1082px;
    margin-left: 30px;
} */
	.thislabel {
		height: 50px;
		font-size: 20px;
		margin-top: 20px;
	}

	.bigjob {
		background-color: #CCCCCC
	}

	.bigoccupation {
		border-left: 1px solid #0000ff;
	}

	.el-tag {
		margin-left: 100px;

	}

	.bdtop {
		border-top: 1px solid #211610
	}

	.bdbottom {
		border-bottom: 1px solid #211610
	}

	.elcenter {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tag {
		margin: 10px;
		margin-left: 300px;
		cursor: pointer;
		font-size: 20px;
	}

	.tag1 {
		font-size: 30px;
	}
	.table{
		font-size: 22px;
	}
	.table>>>.el-table__row {
		cursor: pointer;
	}
	.addLink{
	  padding-left: 10px;
	  font-size: 24px;
	  margin-top: -5px;
	  color:#33aaff;
	 }
</style>